<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>15.aync、await</title>
</head>

<body>

  async/await
  是同步语法彻底消灭了回调函数


  2.async、await和promise的关系
  执行async函数，返回的是Promise对象
  await相当于Promise的then
  try...catch 可以捕获异常，代替了Promise的catch





  <script>
    // async awati使用
    /* function loadImg(src) {
      return new Promise((resolve, reject) => {
        const img = document.createElement('img')
        img.onload = function () {
          resolve(img)
        }

        img.onerror = () => {
          const err = new Error(`图片加载失败 ${src}`)
          reject(err)
        }

        img.src = src
      })
    }

    const url = 'http://hbimg.huabanimg.com/3295eee156523d2aac54e36f0ff13b3a7e0d3a221a7c-joGTzz_fw658/format/webp'

    !(async function () {
      // 同步写法 
      const img1 = await loadImg(url)
      console.log(img1.width);
      console.log(img1.height);
    })() */

    // 1.async函数返回是一个Promise
    /* async function fn1() {
      return 100 // 相当于return Promise.resolve(100)
    }

    let res1 = fn1() // 返回是一个promise对象
    console.log(res1);
    res1.then(data => {
      console.log(data); // 100
    }) */

    // 2.awati相当于then
    /* !(async function () {
      let p1 = Promise.resolve(100)
      const data = await p1 // 相当于Promise then
      console.log('data', data);
    })()

    !(async function () {
      const data2 = await 400 // await Promise.resolve(400)
      console.log('data2', data2);
    })() */

    // try catch捕获reject的异常
    /* !(async function() {
      const p4 = Promise.reject('err1')
      try {
        const res = await p4
        console.log(res);
      } catch (ex) {
        console.error(ex);
      }
    })() */

    /* !(async function() {
      const p4 = Promise.reject('err2') // reject状态
      const res = await p4 // await相当于then所以不会去执行
      console.log('res', res);
    })() */


    // 面试题1
    /* async function async1() {
      console.log('async start'); // 2
      await async2() // undefined
      // await 的后面都可以看做是callback回调中的任务
      // 需要等到同步代码执行完再去执行
      console.log('async end'); // 5
    }

    // 没有await可以看成是一般函数
    async function async2() {
      console.log('async2'); // 3
    }

    console.log('script start'); // 1
    async1()
    console.log('script end'); // 4 */

    // 面试题2
    /* async function async1() {
      console.log('async start'); // 2
      await async2() // undefined
      console.log('async end1'); // 5
      await async3()
      console.log('async end2'); //7
    }

    // 没有await可以看成是一般函数
    async function async2() {
      console.log('async2'); // 3
    }

    async function async3() {
      console.log('async3'); // 6
    }

    console.log('script start'); // 1
    async1()
    console.log('script end'); // 4 */

    // for of 功能
    /* function muti(num) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(num * num)
        }, 1000)
      })
    }

    const nums = [1, 2, 3] */

    // nums.forEach(async (item) => {
    //   const res = await muti(item)
    //   console.log(res);
    // })

    /* !(async function () {
      for (let i of nums) {
        const res = await muti(i)
        console.log(res);
      }
    })() */

    // 面试题3
    async function async1() {
      console.log('async1 start'); // 2
      await async2() 
      // 微任务
      console.log('async1 end'); // 6
    }

    async function async2() {
      console.log('async2'); // 3
    }

    console.log('script start');  // 1

    setTimeout(() => { // 宏任务
      console.log('setTimeout'); // 8
    }, 0)

    async1()
    // 初始化promise是传入的函数会立即执行
    new Promise(function(resolve) {
      console.log('promise1'); // 4
      resolve()
    }).then(function() {
      // 微任务
      console.log('promise2');  //7
    })

    console.log('script end'); // 5



















  </script>

</body>

</html>